<template>
  <div class="login">
    <a class="login-logo" href="/"><img src="@/assets/logo/logo4.png"></a>
    <a class="login-back" href="/">
      <svg-icon class-name="arrow-back-left" icon-class="arrow-back-left" />
      <span class="txt">返回官网</span>
    </a>
    <div class="login-main">
      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
        <h3 class="title">欢迎登录</h3>
        <div class="tab-bar">
          <div v-for="(item, index) in tabList" :key="index" class="tab-item"
            :class="{ 'tab-active': tabActive === item.value }" @click="handleTab(item.value)">
            <span>{{ item.label }}</span>
          </div>
        </div>
        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile" type="text" size="large" auto-complete="off" placeholder="请输入手机号/账号">
            <template #prefix><svg-icon icon-class="login-user" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="tabActive === 1" prop="password">
          <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="请输入密码"
            @keyup.enter="handleLogin">
            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="tabActive === 2" prop="yzm" class="relative">
          <el-input v-model="loginForm.yzm" size="large" auto-complete="off" placeholder="验证码"
            @keyup.enter="handleLogin">
            <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
          </el-input>
          <el-button type="primary" class="login-code" :disabled="isCounting" @click="handleGetCode">
            <span v-if="!isCounting">获取验证码</span>
            <span v-else>重新获取({{ countDown }}s)</span>
          </el-button>
        </el-form-item>
        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">我已阅读并同意<a class="link">《用户协议》</a> 和
          <a class="link">《个人信息保护协议》</a></el-checkbox>
        <el-form-item style="width:100%;">
          <el-button type="primary" class="submit-btn" :loading="loading" size="large" @click.prevent="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
          <div class="login-footer">
            <router-link class="link-type" :to="'/register'"><span>还没有账号？</span>去注册</router-link>
            <router-link class="link-type" :to="'/register'">忘记密码？</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!--  底部  -->
    <!-- <div class="el-login-footer">
      <span>Copyright © 2018-2024 ruoyi.vip All Rights Reserved.</span>
    </div> -->
  </div>
</template>

<script setup>
import { getCode } from "@/api/login"

import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

const loginForm = ref({
  mobile: "",
  password: "",
  rememberMe: false,
  yzm: "",
})

const loginRules = {
  mobile: [{ required: true, trigger: "blur", message: "请输入手机号/账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入密码" }],
  yzm: [{ required: true, trigger: "blur", message: "请输入验证码" }]
}

const loading = ref(false)
const redirect = ref(undefined)
const tabActive = ref(1)
const tabList = ref([{
  label: '密码登录',
  value: 1,
}, {
  label: '验证码登录',
  value: 2,
}])
const countDown = ref(60)
const isCounting = ref(false)
const timer = ref(null)

watch(route, (newRoute) => {
  redirect.value = newRoute.query && newRoute.query.redirect
}, { immediate: true })

function handleLogin() {
  if (!loginForm.value.rememberMe) {
    proxy.$modal.msgError("请先同意《用户协议》和《个人信息保护协议》")
    return
  }
  proxy.$refs.loginRef.validate(valid => {
    if (valid) {
      loading.value = true
      // 调用action的登录方法
      let data = {
        mobile: loginForm.value.mobile,
        type: tabActive.value,
        password: loginForm.value.password,
        yzm: loginForm.value.yzm,
      }
      userStore.login(data).then((res) => {
        const query = route.query
        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
          if (cur !== "redirect") {
            acc[cur] = query[cur]
          }
          return acc
        }, {})
        router.push({ path: redirect.value || "/", query: otherQueryParams })
      }).catch(() => {
        loading.value = false
      })
    }
  })
}

function handleGetCode() {
  if (!loginForm.value.mobile) {
    proxy.$modal.msgError("请输入手机号")
    return
  }
  // 验证码已发送不可点击
  if (isCounting.value) {
    return
  }
  getCode(loginForm.value.mobile).then(res => {
    console.log('getCode res:', res)
    // 获取成功后开始倒计时
    isCounting.value = true
    countDown.value = 60
    timer.value = setInterval(() => {
      countDown.value--
    }, 1000)
  })
}

// 监听倒计时变化
watch(countDown, (val) => {
  if (val === 0) {
    isCounting.value = false
    clearInterval(timer.value)
  }
})

// 组件销毁时清除计时器
onMounted(() => {
  return () => {
    clearInterval(timer.value)
    timer.value = null
  }
})

function handleTab(index) {
  tabActive.value = index
}
</script>

<style lang='scss' scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.png");
  background-size: cover;
  position: relative;
}

.login-logo {
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 1;

  img {
    width: 153px;
    height: 53px;
  }
}

.login-back {
  display: flex;
  align-items: center;
  position: absolute;
  right: 24px;
  top: 24px;
  z-index: 1;

  .txt {
    color: #323233;
    font-size: 12px;
    margin-left: 5px;
  }
}

.title {
  color: rgba(51, 51, 51, 1);
  font-size: 36px;
  line-height: 52px;
  margin-bottom: 58px;
  margin-top: 0;
}

.tab-bar {
  border-bottom: 4px solid rgba(216, 216, 216, 1);
  display: flex;
  margin-bottom: 55px;

  .tab-item {
    border-bottom: 4px solid transparent;
    color: rgba(51, 51, 51, 1);
    cursor: pointer;
    font-size: 18px;
    height: 36px;
    padding-bottom: 6px;
    text-align: center;
    position: relative;
    bottom: -4px;
    width: 50%;

    span {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .tab-active {
    border-bottom-color: rgba(170, 38, 29, 1);
    color: rgba(170, 38, 29, 1);
    font-weight: 500;
  }
}

.login-main {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 32px rgba(0, 0, 0, 0.08);
  width: 646px;
  padding: 0 65px 0 100px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-form {
  .el-input {
    height: 60px;

    input {
      height: 60px;
      font-size: 16px;
    }
  }

  .input-icon {
    height: 39px;
    width: 16px;
    margin-left: 0px;
  }
}

.login-code {
  font-size: 16px;
  height: 48px;
  position: absolute;
  top: 6px;
  right: 5px;
}

.disabled-code {
  color: #888;
  cursor: default;
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.el-checkbox {
  color: rgba(161, 161, 161, 1);
  font-size: 16px;

  :deep(.el-checkbox__label) {
    color: rgba(161, 161, 161, 1);
  }
}

.el-form-item--default {
  margin-bottom: 42px;
}

.submit-btn {
  font-size: 20px;
  font-weight: 400;
  height: 60px;
  width: 100%;
}

.link {
  color: #2A82E4;
}

.login-footer {
  display: flex;
  justify-content: space-between;
  flex: 1;
  margin-top: 24px;

  .link-type {
    font-size: 18px;

    span {
      color: rgba(105, 105, 105, 1);
    }
  }
}
</style>
